<template>
  <div>
    <el-form :model="userForm" :label-position="labelPosition" :rules="rules" label-width="80px">
      <el-form-item label="id" prop="id">
        <el-input v-model="userForm.id" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="userForm.name"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <el-select v-model="userForm.gender" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
<!--        <el-input v-model="userForm.gender" ></el-input>-->
      </el-form-item>
      <el-form-item label="身份" prop="status">
        <el-input v-model="userForm.status"></el-input>
      </el-form-item>
      <el-form-item label="学院" prop="college">
        <el-input v-model="userForm.college"></el-input>
      </el-form-item>
      <el-form-item label="班级" prop="grade">
        <el-input v-model="userForm.grade"></el-input>
      </el-form-item>
      <el-form-item label="联系电话" prop="phone">
        <el-input v-model="userForm.phone"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="saveForm">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
    export default {
      data(){
        return {
          userForm: {
            id: null,
            name: null,
            gender: null,
            phone: null,
            college: null,
            grade: null,
            status: null,
          },
          options: [{
            value: '男',
            label: '男'
          }, {
            value: '女',
            label: '女'
          },
          ],
        };
      },
      created() {
        this.showUserInfo();
      },
      methods: {
        showUserInfo(){
          this.$axios.get('/st/get',{
            params: {
              id: Number(sessionStorage.getItem("id")),
            }
          }).then((response)=>{
            this.userForm = response.data;
          }).catch(()=>{
            this.$router.replace({path: '/'});
            location.reload();
          })
        },
        saveForm(){
          let formData = JSON.stringify(this.userForm);
          this.$axios({
            method: 'post',
            url: '/st/update',
            headers: {
              "Content-Type": "application/json"  //传json数据要加这个，不然导致后端接收的数据与前端不一致
            },
            data: formData,
          }).then(()=>{
            window.alert("保存成功！");
          }).catch((error)=>{
              window.alert(error);
            });
        }
      }
    }
</script>

<style scoped>

</style>
